<template>
  <div class="adduser">
   <el-card shadow="never" class="homeTop">
      <el-row>
        <el-col :span="10">
          <div class="addTitle">
            <i class="el-icon-user-solid"></i> <span>添加最新意向用户资料</span>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <el-card shadow="hover" class="addMain">
      <el-row>
        <el-col :span="16" :offset="4">
          <el-form :model="addUserForm" :rules="addUserRules" ref="addUserForm" label-width="100px" status-icon>
            <el-form-item label="客户名称" prop="nickname">
            <el-input v-model.trim="addUserForm.nickname"></el-input>
            </el-form-item>

            <el-form-item label="联系电话" prop="contact">
            <el-input v-model.trim="addUserForm.contact"></el-input>
            </el-form-item>

            <el-form-item label="QQ" prop="qq">
            <el-input v-model.trim="addUserForm.qq"></el-input>
            </el-form-item>

            <el-form-item label="weixin" prop="weixin">
            <el-input v-model.trim="addUserForm.weixin"></el-input>
            </el-form-item>

            <el-form-item label="咨询专业" prop="zhuanye">
              <el-input placeholder="请输入内容" v-model.trim="addUserForm.zhuanye">
                  <el-select v-model="addUserForm.infoclass" slot="prepend" placeholder="请选择" class="mySelect">
                    <el-option  :value="item.classname" v-for="item in infoClassList" :key="item.id"></el-option>
                  </el-select>
              </el-input>
            </el-form-item>

            <el-form-item label="信息来源" prop="laiyuan">
            <el-input v-model.trim="addUserForm.laiyuan"></el-input>
            </el-form-item>

            <el-form-item label="所在地区" prop="dizhi">
            <el-input v-model.trim="addUserForm.dizhi"></el-input>
            </el-form-item>

            <el-form-item label="选择客服" prop="kefu">
            <el-select v-model="addUserForm.kefu" placeholder="请选择" multiple>
              <el-option :value="item.classname" v-for="item in kefuList" :key="item.id"></el-option>
            </el-select>
            </el-form-item>

            <el-form-item>
              <div style="padding-top:20px">
                <el-row :gutter="20">
                <el-col :span="8" >
                  <el-button style="width:100%;height:45px" type="primary" @click="clickSubmit">确认提交</el-button>
                 </el-col>
                <el-col :span="3">
                  <el-button style="width:100%;height:45px" @click="clickReact">重置</el-button>
                 </el-col>
                </el-row>
              </div>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { getkefuInfo, addUserRow } from '@/nextwork/nextworks'
import { dataRules } from '@/assets/js/validator'
export default {
  data () {
    // 多重校验格式

    return {
      kefuList: [],
      infoClassList: [],
      addUserForm: {
        nickname: '',
        contact: '',
        weixin: '',
        qq: '',
        laiyuan: '',
        dizhi: '',
        kefu: [],
        zhuanye: '',
        infoclass: ''
      },
      addUserRules: {
        nickname: [
          { required: true, message: '请输入客户名称', trigger: 'blur' },
          { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
        ],
        contact: [
          { validator: dataRules, trigger: 'blur' }
        ],
        qq: [
          { validator: dataRules, trigger: 'blur' }
        ],
        weixin: [
          { validator: dataRules, trigger: 'blur' }
        ],
        laiyuan: [
          { required: true, message: '请填写信息来源', trigger: 'blur' }
        ],
        zhuanye: [
          { required: true, message: '专业描述是必填的', trigger: 'blur' }
        ],
        kefu: [
          { type: 'array', required: true, message: '请选择客服', trigger: 'change' }
        ]
      }
    }
  },
  mounted () {
    this.getKfInfo()
  },
  methods: {
    // 添加新用户资料
    clickSubmit () {
      this.$refs.addUserForm.validate((valid) => {
        if (!valid) {
          this.$message.error('请填写以下信息')
        } else {
          addUserRow(this.addUserForm).then(res => {
            this.$message.success('添加成功')
            this.$router.push('/all')
          })
        }
      })
    },
    // 重置表单
    clickReact () {
      this.$refs.addUserForm.resetFields()
    },
    getKfInfo () {
      getkefuInfo().then(res => {
        this.kefuList = res.data.kefu
        this.infoClassList = res.data.infoclass
      })
    }
  }
}
</script>

<style lang="less" scoped>
.adduser{
  width: 100%;
  margin: 24px;
  .addTitle{
    font-size: 28px;
    color: #409EFF;
    span{
    font-size: 25px;
    margin-left: 10px;
    }
  }
  .addMain{
    margin-top: 20px;
   .mySelect{
    width: 120px;
  }
  }

}
</style>
